<template>
  <div class="index">

    <div class="center">
      <left></left>
      <div class="right">
        <top></top>
        <div class="hei10"></div>

        <div style="padding: 20px;">
          <div class="mb20" style=" font-size: 20px; margin-bottom: 30px;">
            <i class="el-icon-arrow-left" style="font-size: 20px; cursor: pointer; font-weight: bold;"
              @click="$router.back(-1)"></i>主播管理
          </div>
          <div class="kflexbc">
            <el-button @click="daka" style="margin-bottom: 20px;" round type="danger">新建主播</el-button>
            <el-button @click="$router.push('/zhibotongji9/zhanduiguanli')" style="margin-bottom: 20px;" plain round
              type="danger">战队管理</el-button>
          </div>

          <el-table :header-cell-style="{
                        background:'#F4F4F4',
                        color:'#7D8087'}" :data="tableData" stripe style="width: 100%">
            <el-table-column prop="id" label="主播id">
            </el-table-column>
            <el-table-column prop="name" label="主播名称">
              
            </el-table-column>
            <el-table-column prop="team" label="所属战队">
              <template slot-scope="scope">
                <span v-if="scope.row.live_team">{{scope.row.live_team.name}}</span>
              </template>
            </el-table-column>

            <el-table-column prop="created_at" label="创建时间">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="handleEdit( scope.row.id)">删除</el-button>
                <el-button type="text"
                  @click="bianji( scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>


        </div>
      </div>
    </div>
    <!-- <foot></foot> -->
    <!-- 打开弹窗 -->
    <el-dialog :title="bianjiall.id?'编辑主播信息':'创建主播'" :visible.sync="addzhubo" width="340px">
      <div style="text-align: center;">
        <div style="margin-bottom: 20px;"><el-input v-model="bianjiall.name" placeholder="输入主播姓名"></el-input></div>
        <el-select v-model="bianjiall.team_id" style="width: 100%;" placeholder="选择战队">
          <el-option v-for="item in zhanduilist" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button round @click="addzhubo = false">取消</el-button>
        <el-button type="danger" round @click="bianjigo">确定</el-button>
      </div>

    </el-dialog>

  </div>
</template>

<script>
  import axios from 'axios'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot
    },
    name: 'zhuboguanli',
    data() {
      return {
        tableData: [{
          created_at:'',
          id:'',
          live_team:{
            id:'',
            name:''
          },
          name:'',
          team_id:''
        }
        ],
        addzhubo: false,
        zhanduilist: [],
        bianjiall: {
          id: "",
          name: "",
          team_id: ""
        },
        chuantushow: true,
        search: {
          page: 1,
          page_size: 20
        },
        total: 0
      }
    },
    created() {
      this.shop_id = JSON.parse(localStorage.getItem('SHOP')).shop_id;
      this.getlist()
      axios.get('/api/live-stream/team/list?page=1&page_size=100').then((response) => {
        this.zhanduilist = response.data.data.list
      })
    },

    methods: {
      //翻页
      fanye: function(page) {
        this.search.page = page
        this.getlist()
      },
      getimg: function(img) {
        this.bianjiall.team_avatar = img
      },
      bianji: function(item) {
        this.bianjiall = {
          id: item.id,
          name: item.name,
          team_id: item.team_id
        }
        this.addzhubo = true
        this.chuantushow = false
        this.$nextTick(() => {
          this.chuantushow = true
        })
      },
      bianjigo: function() {
        if (!this.bianjiall.id) {
          axios.post('/api/live-stream/streamer/createx', this.bianjiall).then((response) => {
            if (response.data.msg.code == 0) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.addzhubo = false
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
        } else {
          axios.put('/api/live-stream/streamer/editx', this.bianjiall).then((response) => {
            if (response.data.msg.code == 0) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.addzhubo = false
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
        }

      },
      getlist() {
        axios.get('/api/live-stream/streamer/listx').then((response) => {
          if (response.data.msg.code == 0) {
            console.log('zhubo')
            console.log(response.data.data.list)
            this.tableData = response.data.data.list
            this.total = response.data.data.count
          } else {
            this.$message.error(response.data.msg.info);
          }
        })
      },
      handleEdit(id) {
        this.$confirm('是否确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.delete('/api/live-stream/streamer/deletex?id=' + id).then((response) => {
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this.getlist()
          })
        })
      },

      daka() {
        this.bianjiall = {
          id: "",
          name: "",
          team_id: ""
        }
        this.addzhubo = true
      },

    }
  }
</script>


<style lang="scss" scoped>
  .index {

    /deep/ .el-button--danger {
      background-color: #2974FF;
      border-color: #2974FF;
    }

    /deep/ .el-button--danger.is-plain {
      background-color: rgb(255, 255, 255);
      border-color: #2974FF;

      &:hover {
        color: #2974FF;
      }
    }
  }
</style>
